<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-案例-地区查询</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            font-size: 15px;
        }
        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <div class="container"></div>
        <form class="row">
            <div class="mb-3 col">
                <label class="form-label">省份/直辖市名字</label>
                <!-- 省份输入框 -->
                <input type="text" value="北京" class="form-control province" placeholder="请输入省份名称" />
            </div>
            <div class="mb-3 col">
                <label class="form-label">城市名字</label>
                <!-- 城市输入框 -->
                <input type="text" value="北京市" class="form-control city" placeholder="请输入城市名称" />
            </div>
        </form>
        <!-- 查询按钮 -->
        <button type="button" class="btn btn-primary my-button">查询</button>
        <br><br>
        <p>地区列表: </p>
        <ul class="list-group">
            <!-- 渲染的列表项 -->
            <li class="list-group-item">东城区</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 核心代码
        // http://hmajax.itheima.net/api/area
        // 传递某个省份内某个城市的所有区县
        // 查询参数名：pname、cname
        // pname说明：传递省份或直辖市名，比如 北京、湖北省…
        // cname说明：省份内的城市，比如 北京市、武汉市…
        // 核心功能：查询地区，并渲染列表

        document.querySelector('.my-button').addEventListener('click',() => {
            // console.log('按钮点了')

            // 1. 获取输入框的内容
            const pname = document.querySelector('.province').value
            const cname = document.querySelector('.city').value
            console.log('pname:',pname)
            console.log('cname:',cname)

            // 2. 查询地区，并渲染列表
            axios({
                url:'http://hmajax.itheima.net/api/area',
                params:{
                    pname,cname
                    // pname:pname,
                    // cname:cname
                }
            }).then(res => {
                // console.log(res.data)
                const list = res.data.list
                // console.log('list:',list)
                const htmlArr = list.map(item => `<li class="list-group-item">${item}</li>`)
                // console.log('htmlArr',htmlArr)
                document.querySelector('.list-group').innerHTML =htmlArr.join('')
            })
        })
    </script>

</body>
</html>